<template>
  <div class="white-bg commonBoxmp">
    <div class="aic " style="margin: 10px">
 <el-button @click="handleAdd" type="primary">添加 没有事件</el-button>
    </div>
    <el-scrollbar class="HeightAuto">
       <g-gantt-chart
    chart-start="2021-07-12 12:00"
    chart-end="2021-07-14 12:00"
    precision="hour"
    bar-start="myBeginDate"
    bar-end="myEndDate"
    @dblclick-bar="onMouseupBar($event.bar, $event.e, $event.datetime)"
  >
    <g-gantt-row label="My row 1" :bars="row1BarList" />
    <g-gantt-row label="My row 2" :bars="row2BarList" />
  </g-gantt-chart>
    </el-scrollbar>
  </div>

</template>

<script setup>
import { ref } from "vue"
const handleAdd =() =>{

}
const onMouseupBar =(bar,e,dateTime) =>{
console.log('bar,e,dateTime :>> ', bar,e,dateTime);
bar.ganttBarConfig.style.background = "#60C97B"
} 
const row1BarList = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {
           hasHandles: true,
      // each bar must have a nested ganttBarConfig object ...
      id: "unique-id-1", // ... and a unique "id" property
      label: "Lorem ipsum dolor"
    }
  }
])
const row2BarList = ref([
  {
    myBeginDate: "2021-07-13 00:00",
    myEndDate: "2021-07-14 02:00",
    ganttBarConfig: {
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {
        // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black"
      }
    }
  }
])
</script>